<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Frontend Test</title>
    <meta charset="UTF-8" />
    <script src="/static/jquery-3.4.1.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  </head>
  <body>
    {%block body %}
    <h1>
      This is a big title
      <span style="font-weight: light; font: 0.75em sans-serif;"
        >with small letter</span
      >
    </h1>
    <hr />
    <p>This is a paragraph</p>
    <ul>
      <li>Un ordered list</li>
      <li>Is suitable for listing items</li>
      <li>Which doesn't have orders</li>
    </ul>
    <p>
      This is another paragraph which has break <br />
      and a <a href="www.baidu.com">to Baidu.com</a>
    </p>
    <ol>
      <li>Ordered list</li>
      <li>You don't have to count the order</li>
      <li>Which the browser will do that for you</li>
    </ol>
    <img
      src="https://www.baidu.com/img/baidu_resultlogo@2.png"
      alt="Baidu logo"
      title="Baidu is a big and bad search company in china"
    />

    <table>
      <tr>
        <th>Book Name</th>
        <th>Amount</th>
      </tr>
      <tr>
        <td>From Zero to One</td>
        <td>$50</td>
      </tr>
    </table>

    <form action="###">
      <div>
        Username:
        <input type="text" name="username" placeholder="{{user}}" />
      </div>
      Who has some ids:
      <ul>
        {% for id in ids %}
        <li>{{id}}</li>
        {% endfor %}
      </ul>
      <div>
        User detail is Username is {{user_obj.name}} <br />
        Age is {{user_obj.age}}
      </div>
      <div>
        Password:
        <input type="password" name="password" placeholder="password" />
      </div>
      <div>
        <a href="{%url "users:hello_user" user %}">Hello page for {{user|safe|upper}}</a>
      </div>

      <select name="vip_level" id="vip_level">
        <option value="bronze">Bronze</option>
        <option value="silver">Silver</option>
        <option value="gold">Gold</option>
      </select>
      <br />
      <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
      <br />
      <input type="submit" value="Create User" id="submit_button" />
      <p id="content">Content can controle</p>
      <button id="show">show</button>
      <button id="hide">hide</button>
    </form>
    {% endblock %}

  </body>
  <script type="text/javascript">
    $buttonEl = $("#submit_button");
    $buttonEl.click(() => {
      alert("Fake submit is triggered");
    });

    $("#show").click(function(e) {
      e.preventDefault();
      $("#content").fadeIn();
    });

    $("#hide").click(function(e) {
      e.preventDefault();
      $("#content").hide();
    });

    // this is a simple show case of js understanding
    var fac = n => {
      if (n <= 1) {
        return 1;
      }
      return fac(n - 1) * n;
    };
    console.log(`Fac(10) is ${fac(10)}`);
    console.log(`Fac(4) is ${fac(4)}`);
  </script>
</html>
